<template>
	<view>
		<nav-header left-icon-color="white" title="账单明细" :show-right="false" bg-color="transparent" :fixed="false"
			:show-border="false"></nav-header>
		<view>
			<view class="detail-header">
				<view>
					<svg-icon :width="140" icon="提现2" v-if="data.fee < 0"></svg-icon>
					<svg-icon :width="140" icon="充值2" v-if="data.fee>0 && data.targetType==0"></svg-icon>
					<svg-icon :width="140" icon="注册" v-if="data.fee>0 && data.targetType==3"></svg-icon>
				</view>
				<view>
					<text class="title">{{data.desc}}</text>
				</view>
				<view>
					<view class="value">
						<text class="price-abs">￥{{ Math.abs(data.fee) }}</text>
					</view>
				</view>
			</view>
			<view class="detail-content">
				<view class="content">
					<text class="tab">当前状态</text>
					<text v-if="data.fee > 0 && data.targetType==0">充值成功</text>
					<text v-if="data.fee > 0 && data.targetType==3">收款成功</text>
					<text v-if="data.fee < 0">提现成功</text>
				</view>
				<view class="content">
					<text class="tab">支付类型</text>
					<text>微信支付</text>
				</view>
				<view class="content">
					<text class="tab">收款单位</text>
					<text>内蒙古星数通科技有限公司</text>
				</view>
				<view class="content">
					<text class="tab">收单机构</text>
					<text>内蒙古星数通科技有限公司</text>
				</view>
				<!-- <view class="content">
					<text class="tab">清算机构</text>
					<text>腾讯微信</text>
				</view> -->
				<view class="content">
					<text class="tab" v-if="data.fee>0">支付时间</text>
					<text class="tab" v-else>提现时间</text>
					<text>{{data.createAt}}</text>
				</view>
				<view class="content">
					<text class="tab">支付方式</text>
					<text>微信支付</text>
				</view>
				<view class="content">
					<text class="tab">交易单号</text>
					<text>{{data.number}}</text>
				</view>
				<!-- <view class="content">
					<text class="tab">商户单号</text>
					<text>T222545154845121545418878</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: null
			}
		},
		methods: {

		},
		onLoad(options) {
			this.data = JSON.parse(options.data)
			console.log(this.data)
		}
	}
</script>

<style lang="scss" scoped>
	.detail-header {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #dfdfdf;
		margin: 0 40rpx;
		gap: 16rpx;

		.title {
			font-size: 34rpx;
		}

		.value {
			font-size: 50rpx;
			font-weight: 500;
			margin-top: 20rpx;
		}
	}

	.detail-content {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		padding: 40rpx;

		.content {
			display: flex;
			align-items: center;
			font-size: 30rpx;

			.tab {
				margin-right: 40rpx;
				color: #aaa;
			}
		}
	}
</style>